<template>
  <div class="el-select">
    <div class="el-input el-input--suffix"  @click="visible = true">
      <div class="el-input__inner">
        <template v-if="checkedServant">
          {{checkedServant.label}}
        </template>
        <template v-else>
          请选择服务者
        </template>
      </div>
      <span class="el-input__suffix">
        <span class="el-input__suffix-inner">
          <i v-if="!visible" class="el-select__caret el-input__icon el-icon-arrow-up"></i>
          <i v-if="visible" class="el-select__caret el-input__icon el-icon-arrow-down"></i>
        </span>
      </span>
    </div>
    <SelectServantDialog
      v-model="visible"
      @change="change"
    ></SelectServantDialog>
  </div>
</template>
<script>
import SelectServantDialog from './Dialog'
import Emitter from 'element-ui/src/mixins/emitter'
export default {
  name: 'SelectServantButton',
  mixins: [Emitter],
  components: {
    SelectServantDialog
  },
  props: {
    value: null,
    label: {
      type: String,
      default: ''
    },
    valueName: {
      value: String,
      default: 'ServantID'
    },
    labelName: {
      value: String,
      default: 'RealName'
    }
  },
  inject: {
    elForm: {
      default: ''
    },
    elFormItem: {
      default: ''
    }
  },
  computed: {
    modelValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
        this.$emit('change', val)
        this.dispatch('ElFormItem', 'el.form.change', val)
      }
    }
  },
  data () {
    return {
      visible: false,
      checkedServant: null
    }
  },
  methods: {
    init () {
      if (this.value && this.label) {
        this.checkedServant = Object.assign({}, {
          label: this.label,
          value: this.value
        })
      }
    },
    change (servant) {
      this.checkedServant = Object.assign({}, {
        label: servant[this.labelName],
        value: servant[this.valueName]
      })
      this.modelValue = servant[this.valueName]
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  }
}
</script>
